<template>
	<!-- 消息 -->
	<view class="page">
		<myNavBar title="消息"></myNavBar>
		<!-- 右侧... -->
		<view style="
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 3px;
        background-color: #fff;
        margin-bottom: 20rpx;
      ">
			<view>{{ title }}</view>

			<view style="position: absolute; right: 20rpx">
				<rudon-rowMenuDotDotDot :localdata="options" @change="menuAction($event)">
					<image style="width: 40rpx; height: 40rpx" src="../../static/index/Frame.png" mode=""></image>
				</rudon-rowMenuDotDotDot>
			</view>
		</view>
		<view v-if="loading" class="chat-loading">
			<loading :size="50" :mask="false">
				<view>消息接收中...</view>
			</loading>
		</view>
		<!-- 好友消息 -->
		<view v-show="topIndex == 1">
			<view class="chat-tip" v-if="!loading && chatStore.chats.length == 0">
				温馨提示：您现在还没有任何聊天消息，快跟您的好友发起聊天吧~
			</view>
			<scroll-view class="scroll-bar" v-else scroll-with-animation="true" scroll-y="true">
				<view v-for="(chatPos, i) in chatsPos" :key="i">
					<chat-item v-if="!chatStore.chats[chatPos.idx].delete" :chat="chatStore.chats[chatPos.idx]"
						:active="menu.chatIdx == chatPos.idx" :index="chatPos.idx"
						@longpress.native="onShowMenu($event, chatPos.idx)"></chat-item>
				</view>
			</scroll-view>

			<pop-menu v-show="menu.show" :menu-style="menu.style" :items="menu.items" @close="onCloseMenu()"
				@select="onSelectMenu"></pop-menu>
		</view>

		<!-- 待办消息 -->
		<view v-show="topIndex == 2">
			<view class="chat-tip" v-if="1 == 0">
				温馨提示：您现在还没有任何代办消息
			</view>
			<todoListVue v-else :list='todoList' />
		</view>

		<!-- 系统消息 -->
		<view v-show="topIndex == 3">
			<view class="chat-tip" v-if="0 == 0">
				温馨提示：您现在还没有任何系统消息
			</view>
			<systemList v-else />
		</view>

	</view>
</template>

<script>
	import todoListVue from './todoList.vue';
	import systemList from './systemList.vue';
	export default {
		components: {
			todoListVue,
			systemList
		},
		data() {
			return {
				todoList: [{
						info: '1'
					},
					{
						info: '2'
					},
					{
						info: '2'
					},
					{
						info: '2'
					},
					{
						info: '2'
					},
					{
						info: '2'
					},
					{
						info: '2'
					},
				],
				title: "好友消息",
				topIndex: 1,
				options: [{
						value: 1,
						text: "好友消息",
					},
					{
						value: 2,
						text: "待办消息",
					},
					{
						value: 3,
						text: "系统消息",
					},
					{
						value: 4,
						text: "取消",
					},
				],
				menu: {
					show: false,
					style: "",
					chatIdx: -1,
					items: [{
							key: "DELETE",
							name: "删除该聊天",
							icon: "trash",
						},
						{
							key: "TOP",
							name: "置顶该聊天",
							icon: "arrow-up",
						},
					],
				},
			};
		},
		methods: {
			menuAction(action) {
				if (action == "" || action == 4) return;
				this.topIndex = action;
				this.title = this.options[action - 1].text;
			},
			onSelectMenu(item) {
				switch (item.key) {
					case "DELETE":
						this.removeChat(this.menu.chatIdx);
						break;
					case "TOP":
						this.moveToTop(this.menu.chatIdx);
						break;
					default:
						break;
				}
				this.menu.show = false;
			},
			onShowMenu(e, chatIdx) {
				this.menu.chatIdx = chatIdx;
				uni.getSystemInfo({
					success: (res) => {
						let touches = e.touches[0];
						let style = "";
						/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
						if (touches.clientY > res.windowHeight / 2) {
							style = `bottom:${res.windowHeight - touches.clientY}px;`;
						} else {
							style = `top:${touches.clientY}px;`;
						}
						if (touches.clientX > res.windowWidth / 2) {
							style += `right:${res.windowWidth - touches.clientX}px;`;
						} else {
							style += `left:${touches.clientX}px;`;
						}
						this.menu.style = style;
						this.menu.chatIdx = chatIdx;
						//
						this.$nextTick(() => {
							this.menu.show = true;
						});
					},
				});
			},
			onCloseMenu() {
				this.menu.chatIdx = -1;
				this.menu.show = false;
			},
			removeChat(chatIdx) {
				this.$store.commit("removeChat", chatIdx);
			},
			moveToTop(chatIdx) {
				this.$store.commit("moveTop", chatIdx);
			},
			refreshUnreadBadge() {
				if (this.unreadCount > 0) {
					uni.setTabBarBadge({
						index: 0,
						text: this.unreadCount + "",
					});
				} else {
					uni.removeTabBarBadge({
						index: 0,
						complete: () => {},
					});
				}
			},
		},
		computed: {
			chatsPos() {
				// 计算会话的顺序
				let chatsPos = [];
				let chats = this.chatStore.chats;
				chats.forEach((chat, idx) => {
					chatsPos.push({
						idx: idx,
						sendTime: chat.lastSendTime,
					});
				});
				chatsPos.sort((chatPos1, chatPos2) => {
					return chatPos2.sendTime - chatPos1.sendTime;
				});
				return chatsPos;
			},
			chatStore() {
				return this.$store.state.chatStore;
			},
			unreadCount() {
				let count = 0;
				this.chatStore.chats.forEach((chat) => {
					if (!chat.delete) {
						count += chat.unreadCount;
					}
				});
				return count;
			},
			loading() {
				return this.chatStore.loadingGroupMsg || this.chatStore.loadingPrivateMsg;
			},
		},
		watch: {
			unreadCount(newCount, oldCount) {
				this.refreshUnreadBadge();
			},
		},
		onShow() {
			this.refreshUnreadBadge();
		},
	};
</script>

<style scoped lang="scss">
	.page {
		position: relative;
		display: flex;
		flex-direction: column;

		.chat-tip {
			position: absolute;
			top: 400rpx;
			padding: 50rpx;
			line-height: 50rpx;
			text-align: left;
			color: darkblue;
			font-size: 30rpx;
		}

		.chat-loading {
			display: block;
			width: 100%;
			height: 100rpx;
			background: white;
			position: relative;
			color: blue;

			.loading-box {
				position: relative;
			}
		}

		.scroll-bar {
			flex: 1;
			height: 100%;
		}
	}
</style>